import 'package:flutter/material.dart';

class MePage extends StatelessWidget {
  const MePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.white,
        child: Column(
          children: [
            // 蓝色背景区域
            Container(
              padding: const EdgeInsets.all(20),
              decoration: const BoxDecoration(
                color:  Color(0xFF4B6BFB),
              ),
              child: SafeArea(
                bottom: false,
                child: Column(
                  children: [
                    // 用户信息行
                    Row(
                      children: [
                        // 头像
                        CircleAvatar(
                          radius: 30,
                          backgroundColor: Colors.white,
                          child: Image.asset(
                            'assets/images/me_avatar.png',  // 你的图片路径
                            width: 40,
                            height: 40,
                            fit: BoxFit.contain,  // 确保图片填充整个空间
                          ),
                        ),
                        const SizedBox(width: 15),
                        // 用户名和ID
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              const Text(
                                'Moli_xEs',
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 20,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              Text(
                                'Your ID: 25739',
                                style: TextStyle(
                                  color: Colors.white.withOpacity(0.8),
                                  fontSize: 14,
                                ),
                              ),
                            ],
                          ),
                        ),
                        // 右箭头
                        const Icon(
                          Icons.arrow_forward_ios,
                          color: Colors.white,
                          size: 20,
                        ),
                      ],
                    ),
                    const SizedBox(height: 10),
                    // 学习数据
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        _buildStatItem('今日新学', '27'),
                        _buildStatItem('共计学习', '328'),
                      ],
                    ),
                    const SizedBox(height: 40),
                  ],
                ),
              ),
            ),
              // 白色内容区域
            Expanded(
              child: Container(
                transform: Matrix4.translationValues(0, -40, 0),
                decoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(40),
                    topRight: Radius.circular(40),
                  ),
                ),
                child: SingleChildScrollView(
                  child: Column(
                    children: [
                      const SizedBox(height: 10),
                      // 功能图标区域
                      Padding(
                        padding: const EdgeInsets.all(20),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          children: [
                            _buildFeatureItem(Icons.assignment, '模拟考试', Colors.blue),
                            _buildFeatureItem(Icons.bar_chart, '错题本', Colors.orange),                            
                            _buildFeatureItem(Icons.book, '单词记忆', Colors.pink),
                          ],
                        ),
                      ),
                        // 菜单列表
                      _buildMenuItem(Icons.pie_chart, '学习统计',Colors.blue),
                      _buildMenuItem(Icons.phone_android, '修改手机号',Colors.orange),
                      _buildMenuItem(Icons.lock, '修改密码',Colors.pink),
                      _buildMenuItem(Icons.info, '关于我们',Colors.green),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
          )
      );
  }

  Widget _buildStatItem(String label, String value) {
    return Column(
      children: [
        Text(
          value,
          style: const TextStyle(
            color: Colors.white,
            fontSize: 40,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 0),
        Text(
          label,
          style: TextStyle(
            color: Colors.white.withAlpha(80),
            fontSize: 14,
          ),
        ),
      ],
    );
  }

  Widget _buildFeatureItem(IconData icon, String label, Color color) {
    return Column(
      children: [
        Container(
          padding: const EdgeInsets.all(12),
          decoration: BoxDecoration(
            color: color.withAlpha(10),
            borderRadius: BorderRadius.circular(12),
          ),
          child: Icon(icon, color: color),
        ),
        const SizedBox(height: 8),
        Text(
          label,
          style: TextStyle(
            fontSize: 14,
            color: Colors.grey[600],
          ),
        ),
      ],
    );
  }

  Widget _buildMenuItem(IconData icon, String title, Color color) {
  return Padding(
    padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
    child: Material(  // 添加 Material
      color: Colors.transparent,
      borderRadius: BorderRadius.circular(8),
      child: InkWell(  // 添加 InkWell
        borderRadius: BorderRadius.circular(8),
        onTap: () {},
        child: ListTile(
          leading: Icon(
            icon, 
            color: color,
            size: 20,
          ),
          title: Text(
            title,
            style: const TextStyle(
              fontSize: 14,
              color: Color.fromARGB(255, 66, 66, 66),
              fontWeight: FontWeight.w500,
            ),
          ),
          trailing: Icon(Icons.arrow_forward_ios, color: Colors.grey[400], size: 14),
        ),
      ),
    ),
  );
}
}
